<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
		    p{
				border: 1px solid red;
				font-size: 16px;/* 页面文字默认大小：16px */
				line-height: 20px;/* 浮动p块元素，内容转行内元素 */
				/* 结论：文本不能浮动，特点：块包行 */
			} 
			img{
				float: right;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/2.png" alt="动漫哪吒" height="300px" width="250px" />
		
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt rerum reiciendis ipsa, explicabo quia blanditiis hic molestiae ducimus, nam cum laboriosam fugiat ratione incidunt ea atque, nihil quas accusamus magni? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas omnis asperiores natus voluptatibus placeat, voluptatem nostrum illo vitae quis magni blanditiis officia harum saepe? Maxime repudiandae nobis id reprehenderit debitis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum delectus laudantium rerum, eaque, tempora explicabo autem ipsam dolorem officia animi doloremque perferendis? Debitis ipsa reiciendis exercitationem quos, rem quia dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officiis saepe magni necessitatibus ipsam aliquid ipsa eligendi eos. Voluptates dolorem ipsum minus odio sit voluptatibus qui a, magnam eum. Exercitationem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem libero fugiat esse quas cumque, et dicta nobis perferendis doloribus quod facere amet ullam eos. Laborum sit magni consequuntur libero aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti sed aliquid iste, et cumque ut a minus facere fugiat nisi rerum. Nam fugiat, corrupti tempore accusamus autem molestias officia voluptate. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae facilis possimus dignissimos! Architecto velit, ullam eius aspernatur temporibus error vel nobis minima id quis, maiores ea laborum. Consequatur, atque nisi!</p>
	</body>
</html>